<!--上传-->
<template>
    <div class="uploadVideo f-cb">
        <form action="###" id="VideoForm">
            <input type="file"  @change="upload($event)" capture="camcorder" accept="image/png, image/jpeg">
        </form>
        <img :src="positiveImgUrl" id="videoas" v-show="positiveImgUrl!=''" />
        <span class="idcardBg">
            <img src="@/assets/img15.png" alt="">
            <span>{{$t('m.Upload')}}</span>
        </span>
    </div>
</template>

<script>
    import {uploads} from "@/common/common";
    export default {
        props: ["list","lang","value",'isnone'],
        data() {
            return{
                positiveImgUrl:"",
            };
        },
        mounted(){
            console.log(this.list,'ssss')
            this.rulesList();
        },
        methods:{
            upload(e){
                let files = e.target.files || e.dataTransfer.files;
                var formDate = new FormData();
                formDate.append("file", files[0]);
                uploads(formDate,res => {
                    var res = res.data;
                    if(res.code == 1){
                        this.positiveImgUrl=res.data.url;
                        document.getElementById("VideoForm").reset()
                    }else{
                        this.$message({
                            message: res.msg,
                            type: "warning"
                        });
                    }
                })
            },
            rulesList(){
                var arr = [];
                if(this.list.is_require==1){
                    arr.push({ required: true,message: this.list['title_'+this.lang]})
                }
                this.$emit('changeRules',this.list.name,arr,this.isnone)
            },
        },
        watch:{
            positiveImgUrl(val,old){
                this.$emit('input',val)
            },
            value:{
                handler(val,old){
                    if(val != undefined || val != ""){
                        //console.log(val,'listItem1')
                        this.positiveImgUrl = val;
                    }
                },
                immediate:true,
                deep:true,
            }
        }
    }
</script>
<style lang="less">
    .uploadVideo{
        width: 460px;
        height: 226px;
        position: relative;
        line-height: 226px;
        border-radius: 3px;
        margin:40px 0 0;
        cursor: pointer;
        border:2px dashed @hoverColor;
        input[type="file"]{
            width: 100%;
            height: 100%;
            position: absolute;
            top:0;
            left:0;
            opacity: 0;
            z-index: 2;
            cursor: pointer;
        }
        #videoas{
            width: 100%;
            height: 100%;
            position: absolute;
            top:0;
            left:0;
            background: @fff;
            opacity: 1;
            object-fit: cover;
            z-index: 1;
        }
        .idcardBg{
            text-align: center;
            width:80px;
            height: 55px;
            position: absolute;
            top:50%;
            left:50%;
            margin:-27.5px 0 0 -40px;
            img{
                width: 30px;
                display: block;
                margin: 0 auto;
            }
            span{
                font-size: 14px;
                line-height: 14px;
                color: @404040;
                padding-top: 11px;
                display: block;
            }
        }
    }
</style>